<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highsecondary" content="no">
    <meta name="viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,width=device-width">

    <title>角色管理</title>
    <link href="../lib/fonts/material-icons.css?family=Material+Icons" rel="stylesheet">
    <link href="../lib/css/animate.min.css" rel="stylesheet">
    <link href="../lib/css/quasar.mat.rtl.min.css" rel="stylesheet" type="text/css">
    <style>
      [v-cloak] { display: none }
      .logoBg {
        width: 50px;height: 50px; background: url(../static/img/logoNew.png) no-repeat left center
      }
      div.q-field-vertical .q-field-label+.q-field-content { padding-top: 0!important }
      .search-group-left { font-size: 13px; border: 1px solid #ccc; padding: 3px 6px!important; border-radius: 3px 0 0 3px; border-right: none }
      .search-group-right { font-size: 13px;border: 1px solid #ccc; padding: 3px 6px!important; border-radius: 0 3px 3px 0 }
      .ant-input { font-size: 13px;border: 1px solid #ccc; padding: 3px 6px!important; border-radius: 3px }
    </style>
  </head>
  <body>
    <div id="q-list" v-cloak>
      <q-card class="bg-white no-shadow full-width">
        <q-card-main class="q-pa-sm">
          <q-table
          class="no-shadow"
          :data="data"
          dense
          :columns="columns"
          :rows-per-page-options="[5, 10, 20]"
          selection="multiple"
          row-key="id"
        >
          <template slot="top-left" slot-scope="props">
            <q-btn
              color="primary"
              outline
              size="sm"
              label="新增"
              @click="Modal = true"
              class="q-mr-sm" ></q-btn>
            <q-btn
              color="negative"
              outline
              size="sm"
              label="删除"></q-btn>
          </template>
          <template slot="top-right" slot-scope="props">
              <q-input 
                class="search-group-left"
                hide-underline
                placeholder="输入查询"
                v-model.trim="searchForm.value"></q-input>
              <q-select 
                class="search-group-right"
                hide-underline
                radio
                :options="[{ label:'城市', value: 'cName' }]"
                v-model="searchForm.key"></q-select>
              <q-btn
                size="sm"
                color="primary"
                class="q-ml-sm q-pa-sm">
                <span slot="loading">
                  <q-spinner-hourglass></q-spinner-hourglass>
                  搜索中
                </span>
                <q-icon name="search"></q-icon>
                <span>查询</span>
              </q-btn>
              <q-btn
                size="sm"
                color="secondary"
                class="q-ml-sm q-pa-sm">
                <span slot="loading">
                  <q-spinner-hourglass></q-spinner-hourglass>
                  重置中
                </span>
                <q-icon name="refresh" ></q-icon>
                <span>重置</span>
              </q-btn>
            </template>
            <template slot="body" slot-scope="props">
              <q-tr
                :props="props"
              >
                <q-td >
                  <q-checkbox color="primary" v-model="props.selected"></q-checkbox>
                </q-td>
                <q-td key="col2" :props="props">
                  <span class="text-primary cursor-pointer" @click="cityClick(props.row.col2)">{{props.row.col2}}</span>
                </q-td>
              </q-tr>
            </template>
        </q-table>
        </q-card-main>
      </q-card>
      <q-modal no-backdrop-dismiss v-model="Modal" :content-css="{minWidth: '44vw', minHeight: '350px',borderRadius: '4px'}">
        <q-modal-layout>
          <q-toolbar slot="header" color="white">
            <q-toolbar-title class="text-dark">
              <span>新增</span>
            </q-toolbar-title>
            <q-btn flat @click="Modal = false">
              <q-icon name="close" color="dark"></q-icon>
            </q-btn>
          </q-toolbar>
          <q-card class="q-px-md q-py-sm bg-white no-shadow full-width">
            <q-card-main class="row gutter-x-md gutter-y-xs">
              <q-field 
                label="供应商编码"
                orientation="vertical"
                class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
                <q-input 
                  v-model.trim="searchForm.name"></q-input>
              </q-field>
              <q-field 
                label="供应商名称"
                orientation="vertical"
                class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
                <q-input 
                  v-model.trim="searchForm.name"></q-input>
              </q-field>
              <q-field 
                label="分发顺序"
                orientation="vertical"
                class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
                <q-input 
                  v-model.trim="searchForm.name"></q-input>
              </q-field>
            </q-card-main>
          </q-card>
          <q-toolbar slot="footer" color="white" class="row justify-end">
              <q-btn
                color="primary"
                flat
                size="sm"
                label="提交"
                @click="Modal = false"
                class="q-mr-sm" ></q-btn>
          </q-toolbar>
        </q-modal-layout>
      </q-modal>
        <q-modal no-backdrop-dismiss v-model="tableModal" :content-css="{minWidth: '66vw', minHeight: '450px',borderRadius: '4px'}">
          <q-modal-layout>
            <q-toolbar slot="header" color="white">
              <q-toolbar-title class="text-dark">
                <span>{{ city }}</span>
              </q-toolbar-title>
              <q-btn flat @click="tableModal = false">
                <q-icon name="close" color="dark"></q-icon>
              </q-btn>
            </q-toolbar>
            <q-card class="q-px-md q-py-sm bg-white no-shadow full-width">
              <q-card-main class="row gutter-x-md gutter-y-xs">
                <q-table
                  class="no-shadow full-width"
                  :data="dataS"
                  dense
                  :columns="columnsS"
                  :rows-per-page-options="[5, 10, 20]"
                  selection="multiple"
                  row-key="id"
                >
                  <template slot="top-right" slot-scope="props">
                      <q-input 
                        class="search-group-left"
                        hide-underline
                        placeholder="输入查询"
                        v-model.trim="searchForm.value"></q-input>
                      <q-select 
                        class="search-group-right"
                        hide-underline
                        radio
                        :options="[{ label:'编码', value: 'code' },{ label:'名称', value: 'name' }]"
                        v-model="searchForm.key"></q-select>
                      <q-btn
                        size="sm"
                        color="primary"
                        class="q-ml-sm q-pa-sm">
                        <span slot="loading">
                          <q-spinner-hourglass></q-spinner-hourglass>
                          搜索中
                        </span>
                        <q-icon name="search"></q-icon>
                        <span>查询</span>
                      </q-btn>
                      <q-btn
                        size="sm"
                        color="secondary"
                        class="q-ml-sm q-pa-sm">
                        <span slot="loading">
                          <q-spinner-hourglass></q-spinner-hourglass>
                          重置中
                        </span>
                        <q-icon name="refresh" ></q-icon>
                        <span>重置</span>
                      </q-btn>
                    </template>
                </q-table>
              </q-card-main>
            </q-card>
            <q-toolbar slot="footer" color="white" class="row justify-end">
              <q-btn
                color="primary"
                flat
                size="sm"
                label="提交"
                @click="tableModal = false"
                class="q-mr-sm" ></q-btn>
            </q-toolbar>
          </q-modal-layout>
        </q-modal>
    </div>
    
    <!-- ie-polyfill 、 vue.js and quasar-framework -->
    <script src="../lib/js/quasar.ie.polyfills.umd.min.js"></script>
    <script src="../lib/js/vue.js"></script>
    <script src="../lib/js/quasar.mat.umd.min.js"></script>
    <!-- quasar i18n zh-hans -->
    <script src="../lib/lang/zh-hans.js"></script>
    <!-- vue-i18n for application's internationalization -->
    <script src="../lib/js/vue-i18n.js"></script>
    <script>
      // quasar components use
      Quasar.i18n.set(Quasar.i18n['zhHans'])
			new Vue({
        el: '#q-list',
				data: function() {
					return {
            city: '',
            searchForm: {
              name: '',
              key: 'cName',
              value: ''
            },
            Modal: false,
            tableModal: false,
            data: [
              {
                col2: '上海',
              },
              {
                col2: '苏州',
              },
              {
                col2: '北京',
              },
              {
                col2: '天津',
              }
            ],
            dataS: [
              {
                col1: '1',
                col2: '001',
                col3: 'A01供应商',
                col4: '上海'
              },
              {
                col1: '2',
                col2: '002',
                col3: 'A02供应商',
                col4: '上海'
              },
              {
                col1: '3',
                col2: '003',
                col3: 'A03供应商',
                col4: '上海'
              },
              {
                col1: '4',
                col2: '004',
                col3: 'A04供应商',
                col4: '上海'
              },
            ]
          }
				},
				computed: {
          columns: function() {
            return [
              {
                name: 'col2',
                label: '城市',
                align: 'center',
                field: 'col2'
              }
            ]
          },
          columnsS: function() {
            return [
              {
                name: 'col1',
                label: '分发顺序',
                align: 'center',
                field: 'col1'
              },
              {
                name: 'col2',
                label: '供应商编码',
                align: 'center',
                field: 'col2'
              },
              {
                name: 'col3',
                label: '供应商名称',
                align: 'center',
                field: 'col3'
              },
              {
                name: 'col4',
                label: '城市',
                align: 'center',
                field: 'col4'
              }
            ]
          }
        },
        watch: {
          
        },
        created: function() {
          
        },
				methods: {
					cityClick: function(city) {
            this.city = city
            this.tableModal = true
          }
				}
			})
    </script>
  </body>
</html>